<template>
    <rx-layout>
        <div slot="center">
            <rx-fit :isheader="isheader">
                <div slot="toolheader" border="false" foldbtn="false">
                    <div class="table-operator">
                        <rx-button
                            alias="insColumnTempAdd"
                            :butn-icon="'plus'"
                            :butn-type="'primary'"
                            :show-no-right="true"
                            @click="add"
                            >{{ $ti18('rxList.newBtn', '新增') }}
                        </rx-button>
                        <a-dropdown
                            v-if="
                                removeEnable && selectedRowKeys.length > 0 && editEnable && selectedRowKeys.length > 0
                            "
                        >
                            <a-button style="margin-left: 8px">
                                {{ $ti18('rxList.moreBtn', '更多') }} <a-icon type="down" />
                            </a-button>
                            <a-menu slot="overlay">
                                <a-menu-item
                                    key="1"
                                    @click="editOne"
                                    v-if="editEnable && selectedRowKeys.length > 0"
                                    alias="formRuleEdit"
                                    :butn-type="'primary'"
                                    :show-no-right="false"
                                >
                                    <a-icon type="edit" />{{ $ti18('rxList.editBtn', '编辑') }}
                                </a-menu-item>
                                <a-menu-item
                                    key="2"
                                    @click="delByIds(selectedRowKeys)"
                                    v-if="removeEnable && selectedRowKeys.length > 0"
                                    alias="formRuleDelete"
                                    :butn-type="'danger'"
                                    :show-no-right="false"
                                >
                                    <a-icon type="delete" />{{ $ti18('rxList.delBtn', '删除') }}
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </div>
                    <span class="search-btn-box" v-if="!isheader">
                        <span class="search-btn" @click.stop="searchshow"
                            ><i class="iconfont iconguolv"></i>{{ $ti18('rxList.leachBtn', '过滤') }}</span
                        >
                    </span>
                </div>
                <div
                    btnalign="right"
                    slot="searchbar"
                    v-if="fitSearch"
                    @search="search"
                    @cancel="cancel"
                    @close="closeSearchbar"
                >
                    <a-form :layout="colLayout">
                        <a-row :gutter="24">
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.name', '名称')">
                                    <a-input
                                        :placeholder="i18n('form.name', '名称', 'input')"
                                        v-model="queryParam.Q_NAME__S_LK"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.key', '编码')">
                                    <a-input
                                        :placeholder="i18n('form.key', '编码', 'input')"
                                        v-model="queryParam.Q_KEY__S_LK"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan" v-if="isheader">
                                <span class="table-page-search-submitButtons">
                                    <a-button type="primary" icon="search" @click="search">{{
                                        $ti18('rxList.searchBtn', '查询')
                                    }}</a-button>
                                    <a-button style="margin-left: 4px" @click="cancel">{{
                                        $ti18('rxList.resetBtn', '重置')
                                    }}</a-button>
                                    <a @click="toggleAdvanced" style="margin-left: 8px">
                                        {{
                                            advanced
                                                ? $ti18('rxList.putAwayBtn', '收起')
                                                : $ti18('rxList.openBtn', '展开')
                                        }}
                                        <a-icon :type="advanced ? 'up' : 'down'" />
                                    </a>
                                </span>
                            </a-col>
                            <template v-if="advanced">
                                <a-col :span="colSpan">
                                    <a-form-item :label="i18n('form.isSys', '是否系统')">
                                        <a-radio-group v-model="queryParam.Q_IS_SYS__S_LK">
                                            <a-radio value="1">{{ i18n('isSysMap.yes', '是否系统') }}</a-radio>
                                            <a-radio value="0">{{ i18n('isSysMap.no', '是否系统') }}</a-radio>
                                        </a-radio-group>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="colSpan">
                                    <a-form-item :label="i18n('form.status', '状态')">
                                        <a-radio-group v-model="queryParam.Q_STATUS__S_LK">
                                            <a-radio value="1">{{ i18n('statusMap.startUsing', '状态') }}</a-radio>
                                            <a-radio value="0">{{ i18n('statusMap.forbidden', '状态') }}</a-radio>
                                        </a-radio-group>
                                    </a-form-item>
                                </a-col>
                            </template>
                        </a-row>
                    </a-form>
                </div>
                <rx-grid
                    ref="table"
                    :bordered="isBorder"
                    :allowRowSelect="true"
                    :multiSelect="true"
                    :columns="columns"
                    :defaultPageSize="10"
                    url="/api-portal/portal/core/insColumnTemp/query"
                    :queryParam="queryParam"
                    data-field="result.data"
                    :pageSizeOptions="['10', '30', '40']"
                    id-field="id"
                    @selectChange="onSelectChange"
                >
                    <span slot="tempType" slot-scope="{ text, record }">
                        <a-tag :color="tempTypeColor">
                            <span>{{ tempTypeMap[text] }}</span>
                        </a-tag>
                    </span>
                    <span slot="isSys" slot-scope="{ text, record }">
                        <a-tag :color="isSysMap[text].color">
                            <span>{{ isSysMap[text].text }}</span>
                        </a-tag>
                    </span>
                    <span slot="status" slot-scope="{ text, record }">
                        <a-tag :color="statusMap[text].color">
                            <span>{{ statusMap[text].text }}</span>
                        </a-tag>
                    </span>
                    <span slot="action" slot-scope="{ text, record }" class="actionIcons">
                        <span v-if="editEnable" @click="edit(record)">{{ $ti18('rxList.editBtn', '编辑') }}</span>
                        <span v-if="removeEnable" @click="delByIds([record.id])">{{
                            $ti18('rxList.delBtn', '删除')
                        }}</span>
                    </span>
                </rx-grid>
            </rx-fit>
        </div>
    </rx-layout>
</template>

<script>
import InsColumnTempApi from '@/api/portal/core/insColumnTemp'
import InsColumnTempEdit from './InsColumnTempEdit'
import { BaseList, RxLayout } from '@lowcode/jpaas-common-lib'

export default {
    name: 'InsColumnTempList',
    mixins: [BaseList],
    components: {
        RxLayout,
    },
    data() {
        return {
            columns: [
                {
                    title: '序号',
                    dataIndex: 'serial',
                    type: 'indexColumn',
                    scopedSlots: { customRender: 'serial' },
                    width: 40,
                },
                { title: this.i18n('form.name', '名称'), dataIndex: 'name', width: 130 },
                { title: this.i18n('form.key', '编码'), dataIndex: 'key', width: 130 },
                {
                    title: this.i18n('form.tempType', '类型'),
                    dataIndex: 'tempType',
                    width: 130,
                    scopedSlots: { customRender: 'tempType' },
                },
                {
                    title: this.i18n('form.isSys', '是否系统'),
                    dataIndex: 'isSys',
                    width: 130,
                    scopedSlots: { customRender: 'isSys' },
                },
                {
                    title: this.i18n('form.status', '状态'),
                    dataIndex: 'status',
                    width: 130,
                    scopedSlots: { customRender: 'status' },
                },
                {
                    title: this.$ti18('rxForm.createTime', '创建时间'),
                    dataIndex: 'createTime',
                    sorter: true,
                    sortField: 'CREATE_TIME_',
                    width: 120,
                },
                {
                    title: this.i18n('form.action', '操作'),
                    dataIndex: 'action',
                    width: 80,
                    scopedSlots: { customRender: 'action' },
                },
            ],
            component: InsColumnTempEdit,
            comment: this.i18n('list.comment', '栏目模板'),
            widthHeight: ['1000px', '600px'],
            isSysMap: {
                1: { color: 'green', text: this.i18n('isSysMap.yes', '是否系统') },
                0: { color: 'red', text: this.i18n('isSysMap.no', '是否系统') },
            },
            statusMap: {
                1: { color: 'green', text: this.i18n('statusMap.startUsing', '状态') },
                0: { color: 'red', text: this.i18n('statusMap.forbidden', '状态') },
            },
            tempTypeMap: {},
            tempTypeColor: 'green',
        }
    },
    created() {
        this.getTempTypeList()
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, 'insColumnTemp', key)
        },
        getTempTypeList() {
            let self = this
            InsColumnTempApi.getTempTypeList().then((res) => {
                var list = res.data
                for (var key in list) {
                    self.tempTypeMap[key] = list[key]
                }
                self.$refs.table.loadData()
            })
        },
        delById(ids) {
            return InsColumnTempApi.del({ ids: ids.join(',') })
        },
        search() {
            this.$refs.table.loadData()
        },
        cancel() {
            this.resetSearch()
        },
        closeSearchbar() {
            //关闭过滤弹窗；（点击X触发）
            this.fitSearch = false
        },
    },
}
</script>
<style scoped></style>
